 <template>
  <div>
    <el-container>
      <el-aside width="300px">
        <!--左侧树-->
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main style="">
        <!-- 右侧展示 -->
        <el-form ref="form" :model="form" label-width="80px">
          
          <el-input v-model="form.parentId" type="hidden"></el-input>
          <el-form-item label="菜单名称">
            <el-input v-model="form.label"></el-input>
          </el-form-item>
          <el-form-item label="父节点">
            <el-input
              v-model="form.parentName"
              @focus="dialogMenuTreeVisible = true"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="是否有效">
            <el-switch 
              v-model="form.visible"
              active-value="0"
              inactive-value="1"
              :disabled="form.label=='菜单管理'?true:false">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button
            type="primary"
            size="mini"
            @click="flush()"
            icon="el-icon-search"
            >刷新</el-button
          >
            <el-button type="primary" size="mini" @click="onSubmit">{{
              addOrUpdate
            }}</el-button>
            <el-button v-if="seen" size="mini" type="danger" @click="onDelete"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <!-- 资源框 -->
    <el-dialog title="资源信息" :visible.sync="dialogMenuTreeVisible">
      <el-tree
        :data="data"
        :props="defaultProps"
        show-checkbox
        check-strictly="true"
        ref="parentMenuTree"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkSelectNode">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Vue from "vue";
// import axios from "axios";
// import VueAxios from "vue-axios";
// Vue.use(VueAxios, axios);

export default {
  data() {
    return {
      data: [], //树数据
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: { visible: true, parentName: "根节点", parentId: 0 },
      dialogMenuTreeVisible: false,
      addOrUpdate: "添加",
      seen: false,  
    };
  },
  created: function () {
    this.loadTreeData();
  },
  methods: {
    loadTreeData() {
      var _this = this;
      //初始化数据
      this.$http
        .get("/api/cs/menu/selectMenuTree")
        .then(function (response) {
          _this.data = response.data.data;
        });
    },
    //根据点击的节点父id查询节点
    loadParentName(data){
        var _this = this;
      //初始化数据
      this.$http
        .get("/api/cs/menu/selectOne",{
          params:{
            id:data.parentId
          }
        })
        .then(function (response) {
          _this.form.parentName = response.data.data.menuName;
        });
    },
    //节点点击事件
    handleNodeClick(data) {
      console.log(JSON.stringify(data));
      // if (data.visible == "0" || data.visible == true) {
      //   data.visible = true;
      // } else {
      //   data.visible = false;
      // }
      this.form = data;
      this.loadParentName(data);
      this.addOrUpdate = "更新";
      this.seen = true;
      this.form.parentName = data.label;
    },
    //提交
    onSubmit() {
      var _this = this;
      console.log("submit!");
      console.log(this.form);
      var url = "";
      if (this.seen) {
        //更新
        url = "/api/cs/menu/updateMenu";
      } else {
        //添加
        url = "/api/cs/menu/insertMenu";
      }
      //添加或者更新获取
      var _this = this;
      // //判断visible是否为true
      // if (this.form.visible) {
      //   this.form.visible = 0;
      // } else {
      //   this.form.visible = 1;
      // }
      // axios
      this.$http
        .post(url, this.form)
        .then(function (response) {
          console.log(response);
          if (response.status == 200) {
            //提示成功
            _this.$message({
              message: "恭喜你，操作成功",
              type: "success",
            });
            //_this.$message.success("恭喜你，添加成功");
            //重新加载数据
            _this.loadTreeData();
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
    },
    //校验选中节点数量
    checkSelectNode() {
      var _this = this;
      let nodes = this.$refs.parentMenuTree.getCheckedNodes();
      if (nodes.length > 1) {
        _this.$message.error("只能选择一个节点。。。");
        return;
      }
      console.log(
        "一个节点：" + JSON.stringify(nodes) + "名称为：" + nodes[0].label
      );
      // this.form.parentName = nodes[0].label;
      
      // this.form.parentName = nodes[0].label;
      this.form.parentId = nodes[0].id;
      this.form.parentName = nodes[0].label;
      //关闭弹框
      this.dialogMenuTreeVisible = false;
      console.log("选中节点：" + JSON.stringify(this.form));
    },
    //删除  不能直接写delete
    onDelete() {
      var _this = this;
      //console.log("要删除的菜单ID"+this.form.id);
      if (this.form.url == null || this.form.url == "") {
        _this.$message.error("该节点下有子节点，不能删除。。。");
        return; //让程序不继续
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // axios
          this.$http
            .delete(
              "/api/cs/menu/deleteById?menuId=" + this.form.id
            )
            .then(function (response) {
              console.log(response);
              if (response.status == 200) {
                //提示成功
                _this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                //重新加载数据
                _this.loadTreeData();
              }
            })
            .catch(function (error) {
              console.log(error);
              _this.$message.error("你错了。。。");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    flush() {
      //刷新当前页
      location.reload();
    },
  },
};
</script>